<template>
	<view class="login-container">
		<!-- Logo区域 -->
		<view class="logo-section">
			<image class="logo" src="/static/home/logo.jpg" mode="aspectFit"></image>
			<text class="gvr_text platform-name">GVR数字化加油维修解决方案平台</text>
		</view>

		<!-- 提示文本 -->
		<view class="gvr_text hint-text">
			登陆后使用全部功能
		</view>

		<!-- 按钮区域 -->
		<view class="button-section">
			<button class="gvr-yellow-button" @click="showServiceAgreement">去登陆/注册</button>
			<text class="gvr-gray-button" @click="handleSkipLogin">暂不登陆</text>
		</view>

		<!-- 服务协议弹窗 -->
		<service-agreeement ref="agreementRef" @confirm="handleAgreementConfirm" @cancel="handleAgreementCancel" />
	</view>
</template>

<script setup>
import { ref } from 'vue'

const agreementRef = ref(null)

// 显示服务协议
const showServiceAgreement = () => {
	agreementRef.value.open()
}

// 处理协议确认
const handleAgreementConfirm = (data) => {
	console.log('用户确认了服务协议')
	// 这里处理微信登录逻辑
	uni.navigateTo({
		url: '/pages/choose/choose-role'
	})
}
// 处理协议取消
const handleAgreementCancel = () => {
	console.log('用户取消了服务协议')
	uni.switchTab({
		url: '/pages/index/index'
	})
}

// 暂不登录
const handleSkipLogin = () => {
	uni.switchTab({
		url: '/pages/index/index'
	})
}
</script>

<style lang="scss" scoped>
.login-container {
	min-height: 100vh;
	background-color: $white-color;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 132rpx;
	box-sizing: border-box;
}

.logo-section {
	margin-top: 162rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.logo {
	width: 476rpx;
	height: 108rpx;
	object-fit: contain;
}

.platform-name {
	margin-top: 26rpx;
	font-size: 32rpx;
	color: $black-color;
	text-align: center;
}

.hint-text {
	margin-top: 218rpx;
	font-size: 32rpx;
	color: $black-color;
	text-align: center;
}
.button-section {
	margin-top: 30rpx;
	width: 470rpx;
	height: 192rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}
.button-section button::after {
  border: none;
}
</style>
